<template>
  <!-- 催收执行页-历史信息模块-跟进记录 -->
  <section class="component follow-up-record">
    <!-- 搜索区域 -->
    <data-form :model="searchModel" @handleResetForm="handleResetForm" @onSearch="refreshData" ref="form">
      <template slot="inputs">
        <el-form-item label="跟进对象" prop="relationship">
          <el-select clearable placeholder="请选择" v-model="searchModel.relationship">
            <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData('Relationship')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道码" prop="channelCode">
          <el-select clearable placeholder="请选择" v-model="searchModel.channelCode">
            <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData(
                'QueueCategory'
              )"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="客观码" prop="objectiveCode">
          <el-select clearable placeholder="请选择" v-model="searchModel.objectiveCode">
            <el-option :key="index" :label="name" :value="id" v-for="{ index, name, id } in objectiveCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经办代号" prop="currentCollectorCode">
          <el-input clearable v-model.trim="searchModel.currentCollectorCode"></el-input>
        </el-form-item>
        <el-form-item label="跟进时间" prop="followTime">
          <el-date-picker :editable="false" placeholder="请选择日期" type="daterange" v-model="searchModel.followTime"></el-date-picker>
        </el-form-item>
      </template>
    </data-form>
    <!-- 数据列区域 -->
    <data-box :data="dataSet" :height="200" :page="pageService" @onPageChange="refreshData" :rowClassName="rowClassNameStyle">
      <template slot="columns">
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="跟进对象" prop="relationship" :formatter="
            row => $filter.dictConvert(row.relationship, 'Relationship')
          "></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="姓名" prop="targetName"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="电话" prop="targetPhone"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="渠道码" prop="queueCategory" :formatter="
            row => $filter.dictConvert(row.queueCategory, 'QueueCategory')
          "></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="客观码" prop="objectiveCode"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(3)" label="修饰码" prop="modifierCode"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="经办代号" prop="currentCollectorCode"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(4)" label="操作员号" prop="operatorCode"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="跟进时间" prop="followTime" :formatter="row => $filter.dateTimeFormat(row.followTime)"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(7)" label="催记内容" prop="followContent"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(5)" label="下次跟进时间" prop="checkTime" :formatter="row => $filter.dateFormat(row.checkTime)"></el-table-column>
        <el-table-column :min-width="$helper.getColumnWidth(6)" label="操作">
          <template slot-scope="scope">
            <div v-if="!hiddenAction && menuChannel !== 4 && menuChannel !== 18 && menuChannel !== 34 && menuChannel !== 44 && menuChannel !== 58">
              <el-button :disabled="scope.row.isEditable==='0'" type="text" @click="handleEdit(scope.row) ">编辑</el-button>
              <el-button :disabled="scope.row.recordId === null" type="text" @click="onClickPlay(scope.row)">播放录音</el-button>
              <el-button :disabled="scope.row.recordId === null" type="text" @click="handleShowDownloadModal(scope.row)">下载录音</el-button>
            </div>
          </template>
        </el-table-column>
      </template>
    </data-box>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" show-close title="播放录音" :visible.sync="dialogVisible" append-to-body width="350px">
      <template v-if="audioList.length">

        <div v-for="(audio,i) of audioList" :key="i">
          <div v-if="!audio.recordName">录音生成中...</div>
          <audio v-else controls :src="audio.recordName" class="audio"></audio>
        </div>
      </template>
      <div v-else>
        录音不存在
        <!-- 录音正在生成中.. -->
      </div>
      <div class="confirm-button">
        <el-button @click="onClickClose">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" show-close title="下载录音" :visible.sync="downloadModalVisible" append-to-body width="350px">
      <template v-if="audioList.length">
        <div v-for="(audio,i) of audioList" :key="i">
          <div v-if="!audio.localUri">录音生成中...</div>
          <div v-else>
            {{audio.localUri}}
            <el-button type="text" @click="downLoadAudio(audio.recordName)">下载</el-button>
          </div>
        </div>

      </template>
      <div v-else>
        录音不存在
        <!-- 录音正在生成中.. -->
      </div>

      <div class="confirm-button">
        <el-button @click="downloadModalVisible=false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑催记信息" :center="true" :visible.sync="dialog" append-to-body width="45%">
      <modify-followup :roleData="roleData" @close="dialog = false" @refreshData="refreshData" ref="modify-followup" />
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { Prop, Watch } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";

import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import NumberRange from "~/components/common/number-range.vue";
import ModifyFollowup from "~/components/common/modify-followup.vue";
import { namespace } from "vuex-class";
import { CODE_PARAMETERS } from "~/config/enum.config";
import { Loading } from 'element-ui'
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {
    NumberRange,
    ModifyFollowup
  }
})
export default class FollowUpRecord extends Vue {
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private hiddenAction;
  @CollectionExecutionModule.State private menuChannel;
  @CollectionExecutionModule.State private objectiveCode;
  @CollectionExecutionModule.State private modifierCode;
  @CollectionExecutionModule.State private isRefreshFollupComponent;

  private searchModel: any = {
    followTime: [],
    currentCollectorCode: "",
    channelCode: "",
    objectiveCode: "",
    relationship: ""
  };
  private dataSet: any[] = [];
  private audioSrc: string = "";
  private dialog: boolean = false;
  private dialogVisible: boolean = false;
  private roleData: any = {}
  private audioList = []
  private downloadModalVisible = false

  /**
   * 范围组件数据重置
   */
  private handleResetForm () { }

  @Watch('isRefreshFollupComponent', { immediate: true })
  private refreshComponentChange (data) {
    console.log('isRefreshFollupComponent', data);
    // if (data) {
    this.refreshData()
    // }
  }

  //获取历史
  private refreshData () {
    this.searchModel.caseId = this.caseId;
    const params = { ...this.searchModel };
    params.followTimeMax = this.$filter.dateRanageFormat(
      this.searchModel.followTime
    ).end;
    params.followTimeMin = this.$filter.dateRanageFormat(
      this.searchModel.followTime
    ).start;
    delete params.followTime;
    this.caseOperatorPageService
      .caseFollowupRecord(params, this.pageService, this.sortService)
      .subscribe(data => {
        this.dataSet = data;
        console.log('this.dataSet', this.dataSet)
      });
  }

  private activated () {
    this.refreshData();
  }

  private handleEdit (row) {
    this.roleData = row
    this.dialog = true

  }

  //编辑催记列表
  private editFollowup (row) {
    this.dialog = true;
    const param = {
      caseId: this.caseId,
      id: row.id,
      relationship: row.relationship,
      targetName: row.targetName,
      targetPhone: row.targetPhone

    }
    this.caseOperatorPageService.updateCaseFollowupRecord(param).subscribe(
      data => {
        this.$message.success("编辑成功")
        this.$emit('refreshData')
        this.dialog = false
      },
      err => { }
    )
  }

  private onClickPlay (row) {
    this.dialogVisible = true;
    this.getAudioList(row)
  }

  private onClickClose () {
    this.dialogVisible = false;
    const audio: any = document.querySelector('.audio')
    audio?.pause()
  }

  //下载录音
  private getAudioList (row) {
    this.caseOperatorPageService.getRecordByRecordId({ recordId: row.recordId }).subscribe(res => {
      // console.log('res', res);
      res.result.forEach((v) => {
        v.recordName = v.recordName.replace("https", "http");
      });
      res.code === '0' ?
        this.audioList = res.result :
        this.audioList = []
    }, err => {
      this.audioList = []
    })
  }

  private downLoadAudio (src) {
    this.$common.downloadFile(src);
  }


  private handleShowDownloadModal (row) {
    this.getAudioList(row)
    this.downloadModalVisible = true
  }


  private rowClassNameStyle ({ row, rowIndex }) {
    if (!row.selfFlag) return "blue-style";
    return "";
  }
}
</script>

<style lang="less">
.component.follow-up-record {
  .el-table {
    .blue-style {
      color: #409eff;
    }
  }
}
</style>
